<script>
import axios from "axios"
import { SearchIcon } from 'tdesign-icons-vue-next';

const wwwHost = import.meta.env.VITE_APP_DOMAIN_URL
console.log("env doamin url is:--------" + wwwHost)
export default {



    name: 'homePage',
    components: {
        SearchIcon
    },
    data() {
        return {
            selectedSchool: '',
            selectedMarjor: '',
            selectedGrade: '',
            selectedWorkExp: '',
            searchQuery: '',

            total: 0,
            current: 1,
            pageSize: 10,


            adviceList: [],

            marjor: '',
            grade: '',
            schools: ['南京大学', '南京财经高等职业技术学校', '北京大学'],
            marjors: ['网络', '信息', '艺术', '机械制造与自动化'],
            grades: ['2019', '2020', '2021', '2022', '2023'],
            workexps: ['10年以上', '5-10年', '3-5年', '1-3年', '在校生|应届']
        }
    },

    methods: {
        onQuery() {
            this.current = 1
            this.query(0, this.pageSize)
        },

        query(current, pageSize) {
            //后台查询
            if (this.selectedSchool === undefined) {
                this.selectedSchool = ""
            }
            if (this.selectedGrade === undefined) {
                this.selectedGrade = ""
            }
            if (this.selectedMarjor === undefined) {
                this.selectedMarjor = ""
            }
            if (this.selectedWorkExp === undefined) {
                this.selectedWorkExp = ""
            }

            //axios
            let url = wwwHost + '/query?searchQuery=' + this.searchQuery
            url = url + '&selectedGrade=' + this.selectedGrade
            url = url + '&selectedSchool=' + this.selectedSchool
            url = url + '&selectedMarjor=' + this.selectedMarjor
            url = url + '&selectedWorkExp=' + this.selectedWorkExp
            url = url + '&page=' + current
            url = url + '&pageSize=' + pageSize
            this.fetchData(url);
        },

        fetchData(url) {
            // 向给定ID的用户发起请求 //请求参数长度联能超过2K字节，查用
            console.log("url params is:" + url)
            axios.get(url)
                .then(response => {
                    // 处理成功情况
                    console.log(response);
                    this.adviceList = response.data.records;
                    this.total = response.data.total;
                })
                .catch(error => {
                    // 处理错误情况
                    console.log(error);
                })
                .finally(function () {
                    // 总是会执行
                });
        },

        onChange(pageInfo) {
            console.log("onChange")
            console.log(pageInfo)
            this.pageSize = pageInfo.pageSize
            this.current = pageInfo.current
            this.query(pageInfo.current, pageInfo.pageSize)
        },

        onPageSizeChange(size) {
            console.log("onPageSizeChange")
            console.log(size)
            this.query(this.current, size)

        },

        onCurrentChange(index, pageInfo) {
            console.log("onCurrentChange")
            console.log("index:", index)
            console.log("pageInfo:", pageInfo)
            this.query(pageInfo.current, pageInfo.pageSize)
        }
    },


    created() {
        this.query()
    }


}
</script>

<template>
    <div class="flex flex-col justify-center">
        <div class="flex h-72 items-center px-20 justify-center gap-x-4 bg-gradient-to-r from-green-200 to-blue-300">
            <div class="flex flex-col ">
                <div class="text-center text-5xl mb-10 font-bold"> 发现各专业前辈们的学习建议
                </div>
                <div class="flex gap-x-4">
                    <t-input placeholder="搜搜专业建议" class="w-64" clearable size="large" v-model="searchQuery">
                        <template #suffixIcon>
                            <search-icon :style="{ cursor: 'pointer' }" />
                        </template>
                    </t-input>

                    <t-button @click="onQuery" size="large">
                        搜索
                    </t-button>
                </div>

                <div class="flex mt-5 justify-center gap-4 grid-rows-1">
                    <!--过滤条件-->
                    <t-select v-model="selectedSchool" placeholder="所有学校" clearable>
                        <t-option v-for="school in schools" :key="index" :value="school" :label="school">
                        </t-option>
                    </t-select>


                    <t-select v-model="selectedMarjor" placeholder="所有专业" clearable>
                        <t-option v-for="marjor in marjors" :key="index" :value="marjor" :label="marjor">
                        </t-option>
                    </t-select>

                    <t-select v-model="selectedGrade" placeholder="所有年级" clearable>
                        <t-option v-for="grade in grades" :key="index" :value="grade" :label="grade">
                        </t-option>
                    </t-select>



                    <t-select v-model="selectedWorkExp" placeholder="所有年级" clearable>
                        <t-option v-for="work in workexps" :key="index" :value="work" :label="work">
                        </t-option>
                    </t-select>
                </div>
            </div>
        </div>

        <t-space direction="vertical" align="center" size="small">


            <t-card :subtitle="advice.create_time" v-for="advice in adviceList" :style="{ width: '640px' }">
                {{ advice.content }}
                <template #footer>
                    <t-row :align="'middle'" justify="end" style="gap: 24px">
                        <t-col>
                            <t-tag>{{ advice.school }}</t-tag>
                        </t-col>
                        <t-col>
                            <t-tag>{{ advice.education }}</t-tag>
                        </t-col>
                        <t-col>
                            <t-tag>{{ advice.major }}</t-tag>
                        </t-col>
                        <t-col>
                            <t-tag>{{ advice.work_exp }}</t-tag>
                        </t-col>
                    </t-row>
                    <t-row :align="'middle'" justify="center" style="gap: 24px">
                        <t-col flex="auto" style="display: inline-flex; justify-content: center">
                            <t-button variant="text" shape="square">
                                <t-icon name="thumb-up" />
                            </t-button>
                        </t-col>

                        <t-col flex="auto" style="display: inline-flex; justify-content: center">
                            <t-button variant="text" shape="square">
                                <t-icon name="chat" />
                            </t-button>
                        </t-col>

                        <t-col flex="auto" style="display: inline-flex; justify-content: center">
                            <t-button variant="text" shape="square">
                                <t-icon name="share" />
                            </t-button>
                        </t-col>
                    </t-row>
                </template>
            </t-card>

            <t-pagination v-model="current" v-model:pageSize="pageSize" :total="total" @change="onChange"
                @page-size-change="onPageSizeChange" @current-change="onCurrentChange" />

                <t-affix ref="affix" :offset-top="140" :offset-bottom="20">
            <t-sticky-tool :style="{ position: 'relative', overflow: 'hidden' }" :offset="[-500, -24]"
                @click="handleClick" @hover="handleHover">
                <t-sticky-item label="chat">
                    <template #icon><t-icon name="chat" /></template>
                </t-sticky-item>
                <t-sticky-item label="add">
                    <template #icon><t-icon name="add" @click="this.$router.push('/enterAdvice')" /></template>
                </t-sticky-item>
                <t-sticky-item label="aqcode" :popup="renderPopup"
                    :popup-props="{ overlayInnerStyle: { padding: '4px', height: '128px' } }">
                    <template #icon><t-icon name="qrcode" /></template>
                </t-sticky-item>
            </t-sticky-tool>
        </t-affix>

        </t-space>
    </div>
</template>
